<template>
  <!-- 营收统计表 -->
  <el-card class="mt">
    <template #header>
      <div class="card-header">
        <h1>营收统计表</h1>
      </div>
    </template>

    <ul class="ranking-list">
      <li class="ranking-item">
        <span class="rank" style="background-color: #c60023; color: #fff">1</span>
        <span class="store-name">北京</span>
        <span class="sales">52,457</span>
        <span class="" style="margin-left: 50px"
          >24%
          <el-icon color="green">
            <CaretTop />
          </el-icon>
        </span>
      </li>
      <li class="ranking-item">
        <span class="rank" style="background-color: #ff6600; color: #fff">2</span>
        <span class="store-name">上海</span>
        <span class="sales">52,457</span>
        <span class="" style="margin-left: 50px"
          >24%
          <el-icon color="green">
            <CaretTop />
          </el-icon>
        </span>
      </li>
      <li class="ranking-item">
        <span class="rank" style="background-color: rgb(103, 194, 58); color: #fff"
          >3</span
        >
        <span class="store-name">广州</span>
        <span class="sales">52,457</span>
        <span class="" style="margin-left: 50px"
          >24%
          <el-icon color="green">
            <CaretTop />
          </el-icon>
        </span>
      </li>
      <li class="ranking-item">
        <span class="rank">4</span>
        <span class="store-name">深圳</span>
        <span class="sales">52,457</span>
        <span class="" style="margin-left: 50px"
          >24%
          <el-icon color="green">
            <CaretTop />
          </el-icon>
        </span>
      </li>
      <li class="ranking-item">
        <span class="rank">5</span>
        <span class="store-name">天津</span>
        <span class="sales">52,457</span>
        <span class="" style="margin-left: 50px"
          >24%
          <el-icon color="green">
            <CaretTop />
          </el-icon>
        </span>
      </li>
      <li class="ranking-item">
        <span class="rank">1</span>
        <span class="store-name">江苏</span>
        <span class="sales">52,457</span>
        <span class="" style="margin-left: 50px"
          >24%
          <el-icon color="green">
            <CaretTop />
          </el-icon>
        </span>
      </li>
      <li class="ranking-item">
        <span class="rank">1</span>
        <span class="store-name">南京</span>
        <span class="sales">52,457</span>
        <span class="" style="margin-left: 50px"
          >24%
          <el-icon color="green">
            <CaretTop />
          </el-icon>
        </span>
      </li>
    </ul>
  </el-card>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.ranking-list {
  .ranking-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    &:nth-child(even) {
      background-color: rgb(253, 246, 236);
    }

    .rank {
      display: inline-block;
      font-weight: bold;
      color: #666;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      text-align: center;
      line-height: 30px;
    }

    .store-name {
      flex-grow: 1;
      padding: 0 10px;
    }

    .sales {
      color: #666;
    }
  }
}
</style>
